<script setup>
import { ref } from 'vue'
import UserInfo from '@/views/UserCenter/components/UserInfo.vue'
import OrderInfo from '@/views/UserCenter/components/OrderInfo.vue'
import EvaluateInfo from '@/views/UserCenter/components/EvaluateInfo.vue'
import RePassword from '@/views/UserCenter/components/RePassword.vue'

// 获取用户预约组件
const orderRef = ref(null)

// 获取用户评价组件
const evaluateRef = ref(null)

// 控制默认选中的标签页
const activeName = ref('个人资料')

// tab导航栏切换时根据导航项发送请求获取相应的数据
const handleClick = async (tab) => {
  // 点击我的预约时获取用户预约信息表
  if (tab.paneName === '我的预约') {
    orderRef.value.getOrderList()
  } else if (tab.paneName === '我的评价') {
    evaluateRef.value.getRateInfo()
  }
}
</script>

<template>
  <div class="container">
    <el-tabs
      v-model="activeName"
      type="border-card"
      tab-position="left"
      class="tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane name="个人资料">
        <template #label>
          <span>
            <i class="iconfont icon-gerenziliao"></i>
            <h4>个人资料</h4>
          </span>
        </template>
        <UserInfo></UserInfo>
      </el-tab-pane>

      <el-tab-pane name="我的预约">
        <template #label>
          <span>
            <i class="iconfont icon-wodeyuyue"></i>
            <h4>我的预约</h4>
          </span>
        </template>
        <OrderInfo ref="orderRef"></OrderInfo>
      </el-tab-pane>

      <el-tab-pane name="我的评价">
        <template #label>
          <span>
            <i class="iconfont icon-comment"></i>
            <h4>我的评价</h4>
          </span>
        </template>
        <EvaluateInfo ref="evaluateRef"></EvaluateInfo>
      </el-tab-pane>

      <el-tab-pane name="重置密码">
        <template #label>
          <span>
            <i class="iconfont icon-zhongzhimima"></i>
            <h4>重置密码</h4>
          </span>
        </template>
        <RePassword></RePassword>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 80%;
  background-color: #fff;

  .tabs {
    height: 100%;
    height: auto;

    ::v-deep .el-tabs__nav {
      width: 130px;
      height: 850px;

      .el-tabs__item {
        width: 100%;
        height: 150px;
        border: 0;
        padding: 0;

        span {
          display: flex;
          width: 100%;
          height: 100%;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          font-size: 20px;

          .iconfont {
            font-size: 30px;
          }
        }
      }
    }

    .form {
      width: 800px;
      height: auto;
    }
  }
}
</style>
